<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>01_收集表单数据</title>
</head>
<body>
    
    <!-- 
       
        收集表单数据：
            若：<input type="text"/>，则 v-model 收集的是Value值，用户输入的就是value值。
            若：<input type="radio"/>，则 v-model 收集的是 value值，且要给标签配置value值
            若：<input type="checkbox"/>
                1.没有配置input的value属性，那么收集的就是 checked （勾选 or 未勾选，是布尔值）
                2.配置input的value属性：
                    (1)v-model的初始值是 非数组，那么收集的依旧是 checked （勾选 or 未勾选，是布尔值）
                    (2)v-model的初始值是 数组，那么收集的就是value组成的数组

            备注：v-model的三个修饰符：
                    lazy：失去焦点再收集数据    （推荐使用：textarea）
                    number：输入字符串转换为有效的数字  （推荐使用：配合 number 表单输入使用）
                    trim：输入首尾空格自动过滤  （推荐使用：text）
     -->


    <!-- 容器 -->
    <div id="root">
    <form @submit.prevent="submit">
        账号：<input type="text"  v-model.trim="userInfo.account"><br/><br/>
        密码：<input type="password" v-model="userInfo.pwd"><br/><br/>
        性别：
        男<input type="radio" name="gender" v-model="userInfo.gender" value="nan">
        女<input type="radio" name="gender" v-model="userInfo.gender" value="nv">
        <br/><br/>
        年龄<input type="number" v-model.number="userInfo.age" value="">
        <br/><br/>
        爱好：
        抽烟<input type="checkbox" value="chouyan" v-model="userInfo.hobby">
        喝酒<input type="checkbox" value="hejiu"   v-model="userInfo.hobby">
        烫头<input type="checkbox" value="tangtou" v-model="userInfo.hobby">
        <br/><br/>
        所属城市：
        <select v-model="userInfo.campus">
            <option value="0">请选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="3">深圳</option>
        </select>
        <br/><br/>
        其他信息：
        <textarea v-model.lazy="userInfo.info" style= "height:120px; width:180px">

        </textarea>
        <br/><br/>
        <input v-model="userInfo.agree" type="checkbox">阅读并接收<a href="">《用户协议》</a>
        <br/><br/>
        <input type="submit" value="提交">


    </form>
    </div>
    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。

     

       new Vue({
            el:'#root',
            data:{
                userInfo:{
                    account:'',
                    pwd:'',
                    gender:'',
                    age:'',
                    hobby:[],
                    campus:'1', // 下拉框默认选中value为1
                    info:'',
                    agree:''
                }

            },
            methods:{
                submit(){
                    console.log(JSON.stringify(this.userInfo))
                }
            }
        })
 
       
    </script>
</body>
</html>